<template>
	<view class="container">
		<v-tabs
			v-model="current"
			:tabs="tabs"
			@change="changeTab"
			:fixed="true"
		></v-tabs>
		<view v-if="isfetch" style="padding: 0 32rpx">
			<view class="flex f-column" v-if="useNum + noUseNum > 0">
				<view
					class="card-item flex f-align"
					v-for="(item, index) in useNum"
					:key="index"
					@click="selectHandle(index)"
				>
					<view class="item-left f-center f-column white" v-if="!current">
						<text class="font60">1次</text>
						<text class="font26">充值专享</text>
					</view>
					<view class="item-left f-center f-column white" v-else>
						<text class="font60">￥{{ ticketVal }}</text>
						<text class="font26">新人专享</text>
					</view>
					<view
						class="item-right flex f-column"
						style="width: calc(100% - 207rpx)"
					>
						<view class="flex f-align w100 f-justifyB">
							<text class="font32 gray333">{{
								!current ? '抵消一次洗衣' : '新人体验券'
							}}</text>
							<view
								class="to-use font24 blue f-center"
								v-if="!type"
								@click.stop="toUseHandle"
							>
								{{ ticketStatus == '未领取' ? '领取' : '去使用' }}
							</view>
							<icon
								type="success"
								size="15"
								:color="isSelect(index)"
								v-else
							></icon>
						</view>
						<text class="font22 mt10 gray777" v-if="!current"
							>增值服务费用除外</text
						>
						<view class="flex f-column mt10" v-else>
							<text class="font22 gray777" v-if="ticketStatus == '已领取'"
								>有效期：{{
									toTime(userInfo.getTime) +
									'-' +
									toTime(userInfo.staleDatedTime)
								}}</text
							>
							<text
								class="font22 gray777"
								v-if="ticketStatus == '未领取' && ticketDays"
								>有效期：{{ ticketDays }}天</text
							>
							<text class="font22 gray777"
								>说明：凭此券价格可任意清洗指定衣物一件</text
							>
						</view>
					</view>
				</view>
				<view
					class="card-item card-no flex f-align"
					v-for="(item, index) in noUseNum"
					:key="index"
				>
					<view class="item-left f-center f-column white" v-if="!current">
						<text class="font60">1次</text>
						<text class="font26">充值专享</text>
					</view>
					<view class="item-left f-center f-column white" v-else>
						<text class="font60">￥{{ ticketVal }}</text>
						<text class="font26">新人专享</text>
					</view>
					<view
						class="item-right flex f-column"
						style="width: calc(100% - 207rpx)"
					>
						<view class="flex f-align w100 f-justifyB">
							<text class="font32 gray333">{{
								!current ? '抵消一次洗衣' : '新人体验券'
							}}</text>
						</view>
						<text class="font22 mt10 gray777" v-if="!current"
							>增值服务费用除外</text
						>
						<view class="flex f-column mt10" v-else>
							<text class="font22 gray777"
								>有效期：{{
									toTime(userInfo.getTime) +
									'-' +
									toTime(userInfo.staleDatedTime)
								}}</text
							>
							<text class="font22 gray777"
								>说明：凭此券价格可任意清洗指定衣物一件</text
							>
						</view>
					</view>
				</view>
			</view>
			<view class="flex f-column f-align" v-else>
				<text class="font36 gray999 bold mt50"
					>暂无{{ current == 0 ? '次卡' : '体验券' }}</text
				>
			</view>
		</view>
		<view
			class="btn-box"
			v-if="isfetch && useNum > 0 && type"
			@click="confirmSelect"
		>
			<view class="btn font32 white f-center">确认选择</view>
		</view>
	</view>
</template>

<script>
import vTabs from '@/components/v-tabs/v-tabs.vue'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			current: 0,
			tabs: ['次卡', '体验券'],
			page: 1,
			loadStatus: 'more',
			isfetch: false,
			useNum: 0,
			noUseNum: 0,
			type: '', // 俩值 quan cika
			indexArr: [],
			isGuoQi: false,
			ticketVal: 0,
			ticketDays: '',
			goodsNum: 0, // 最多选择的衣子数量
			ticketStatus: '' // 优惠券状态
		}
	},
	components: {
		vTabs
	},
	onLoad(option) {
		if (option.type) {
			this.type = option.type
			if (this.type == 'quan') {
				this.current = 1
				this.tabs = ['体验券']
				this.getUserInfo()
			} else {
				this.current = 0
				this.tabs = ['次卡']
				this.useNum = this.userInfo.setUpNumber
				this.noUseNum = this.userInfo.yishiyong
			}
		}
		if (option.tabs) {
			if (option.tabs == 1) {
				this.current = 1
				this.getUserInfo()
			} else {
				this.current = 0
				this.useNum = this.userInfo.setUpNumber
				this.noUseNum = this.userInfo.yishiyong
			}
		}

		if (option.goodsNum) {
			this.goodsNum = option.goodsNum
		}
	},
	onReady() {
		this.isfetch = true
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapMutations(['login']),
		getTicketInfo() {
			if (this.userInfo.discountsMoney) {
				this.ticketVal = parseFloat(this.userInfo.discountsMoney)
			} else {
				this.$http
					.ajax({
						url: '/CouponsSetUp/list',
						params: {}
					})
					.then((res) => {
						if (res.code == 200 && res.data.length > 0) {
							this.ticketVal = res.data[0].couponsMoney
							this.ticketDays = res.data[0].periodOfValidity
						}
					})
			}
		},
		getUserInfo() {
			this.$http
				.ajax({
					url: '/User/wxSelect',
					params: {
						openId: uni.getStorageSync('openId')
					}
				})
				.then((res) => {
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data[0])
						this.login(res.data[0])
						this.getTicketInfo()
						let info = res.data[0]
						switch (info.isGetDiscounts) {
							case '未领取':
								this.useNum = 1
								this.noUseNum = 0
								this.ticketStatus = '未领取'
								break
							case '已领取':
								this.useNum = 1
								this.noUseNum = 0
								this.ticketStatus = '已领取'
								break
							case '已使用':
							case '已过期':
								this.useNum = 0
								this.noUseNum = 1
								break
						}
					}
				})
		},
		confirmSelect() {
			// if (this.indexArr.length == 0) {
			// 	this.$api.msg('请选择')
			// 	return
			// }

			if (this.type == 'cika') {
				this.$api.prePage().cikaSelectNum = this.indexArr.length
			} else {
				if (this.indexArr.length) {
					this.$api.prePage().isDiscounts = '已使用'
					this.$api.prePage().ticketVal = parseFloat(this.ticketVal)
				} else {
					this.$api.prePage().isDiscounts = '未使用'
					this.$api.prePage().ticketVal = 0
				}
			}

			setTimeout(() => {
				uni.navigateBack()
			}, 300)
		},
		isSelect(index) {
			if (this.indexArr.includes(index)) {
				return '#4082FD'
			} else {
				return '#cccccc'
			}
		},
		selectHandle(i) {
			let index = this.indexArr.indexOf(i)
			if (index != -1) {
				this.indexArr.splice(index, 1)
			} else {
				if (
					this.type == 'cika' &&
					this.$api.prePage().isDiscounts == '已使用' &&
					this.goodsNum - 1 == this.indexArr.length
				) {
					this.$api.msg('当前订单最多可使用' + (this.goodsNum - 1) + '张次卡')
					return
				}

				if (this.type == 'cika' && this.goodsNum == this.indexArr.length) {
					this.$api.msg('当前订单最多可使用' + this.goodsNum + '张次卡')
					return
				}

				if (this.type == 'quan' && this.$api.prePage().cikaNum > 0) {
					uni.showModal({
						title: '提示',
						content:
							'当前已选择次卡，如使用体验券，将自动取消一张次卡，是否继续?',
						showCancel: true,
						cancelText: '否',
						confirmText: '是',
						success: (res) => {
							if (res.confirm) {
								this.indexArr.push(i)
							} else if (res.cancel) {
							}
						}
					})
					return
				}
				this.indexArr.push(i)
			}
		},
		toUseHandle() {
			if (this.ticketStatus == '未领取') {
				this.getTicket()
				return
			}
			uni.switchTab({
				url: '/pages/kind'
			})
		},
		getTicket() {
			uni.showLoading({
				title: '领取中...'
			})
			this.$http
				.ajax({
					url: '/User/getYHJ',
					params: {
						openId: uni.getStorageSync('openId')
					}
				})
				.then((data) => {
					uni.hideLoading()
					if (data.code == 200) {
						this.getUserInfo()
					} else {
						this.$api.msg(data.msg)
					}
				})
		},
		changeTab(item) {
			if (item == '次卡') {
				this.useNum = this.userInfo.setUpNumber
				this.noUseNum = this.userInfo.yishiyong
				this.ticketStatus = ''
			} else {
				this.getUserInfo()
			}
		},
		toTime(time) {
			if (!time) {
				return ''
			}

			return time.split(' ')[0]
		}
	}
}
</script>

<style scoped lang="scss">
.card-item {
	width: 686rpx;
	height: 160rpx;
	background-image: url();
	background-size: 100% 100%;
	margin-top: 30rpx;
	position: relative;

	.item-left {
		width: 207rpx;
		height: 160rpx;
	}

	.item-right {
		padding: 26rpx 32rpx;

		.to-use {
			width: 106rpx;
			height: 40rpx;
			border: 2rpx solid #4082fd;
			border-radius: 20rpx;
		}
	}
}

.card-no {
	background-image: url();
}

.container {
	padding: 0;
	padding-bottom: 90rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 90rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 90rpx);

	.btn-box {
		width: 750rpx;
		height: calc(constant(safe-area-inset-bottom) + 90rpx);
		height: calc(env(safe-area-inset-bottom) + 90rpx);
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
	}

	.btn {
		width: 686rpx;
		height: 70rpx;
		background: #4082fd;
		border-radius: 36rpx;
		margin: 20rpx auto 0;
	}
}
</style>
